<template>
  <div>
    <!-- 新增修改表单 -->
    <el-dialog :title="textMap[dialogStatus]+'('+parentNodeName+')'" :visible.sync="DialogFormVisibleCom" width="90%"
               append-to-body>
      <el-form ref="dataForm" :rules="rules" :model="formSubmitDataCom" label-position="right" label-width="140px"
               style="width: 95%; margin:10px auto;">



<!-- id: undefined,
        1  path:'',                //url路径
         1 component:'',           //路由渲染组件
         1 always_show:true,         //如果设置为true，将总是显示根菜单  *如果没有设置alwaysShow，当item有多个子元素route时，  *它将成为嵌套模式，否则不显示根菜单
         1 name:'',                //路由名称，该名称由<keep-alive>使用(必须设置!!)  
        1  redirect:'noRedirect',            //如果设置noRedirect将不会在面包屑中进行重定向  
         1 hiden:false,               //是否隐藏路由
          // meta_roles:'',          //控制页面角色(可以设置多个角色)  
        1  meta_title:'',          //在侧边栏和面包屑中显示的名称键值(使用i18n组渲染最终标题)  
        1  meta_icon:'',           //图标显示在侧边栏中  
          meta_no_cache:false,       //如果设置为true，页面将不会被缓存(默认为false)  
          meta_affix:false,          //如果设置为true，标记将附加在标记视图中  
          meta_breadcrumb:true,     //如果设置为false，该项目将隐藏在breadcrumb中(默认为true)  
          meta_active_menu:'',    //如果设置了路径，侧边栏将突出显示您设置的路径  
          p_code:'',              //节点
          p_name:'',              //节点名称
          parent_code:'',         //父节点
          status: '1',              -->

        <el-divider>路由基础属性</el-divider>
        <el-row :gutter="20">
          <!-- url路径 -->
          <el-col :span="12">
            <el-form-item label="url路径" prop="path">
              <el-input v-model="formSubmitDataCom.path"/>
            </el-form-item>
          </el-col>
          <!-- 渲染组件 -->
          <el-col :span="12">
            <el-form-item label="渲染组件" prop="component">
              <el-input v-model="formSubmitDataCom.component"/>
            </el-form-item>
          </el-col>
          <!-- 根菜单 -->
          <el-col :span="12">
            <el-form-item label="根菜单" prop="always_show">
              <el-switch
                v-model="formSubmitDataCom.always_show"
                >
              </el-switch>
            </el-form-item>
          </el-col>
          <!-- 路由名称 -->
          <el-col :span="12">
            <el-form-item label="路由名称" prop="name">
              <el-input v-model="formSubmitDataCom.name"/>
            </el-form-item>
          </el-col>
          <!-- 重定向 -->
          <el-col :span="12">
            <el-form-item label="重定向" prop="redirect">
              <el-input v-model="formSubmitDataCom.redirect"/>
            </el-form-item>
          </el-col>
          <!-- 隐藏路由 -->
          <el-col :span="12">
            <el-form-item label="隐藏路由" prop="hiden">
              <el-switch
                v-model="formSubmitDataCom.hiden"
                >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>路由meta属性</el-divider>
        <el-row :gutter="20">
          <!-- meta-名称键值 -->
          <el-col :span="12">
            <el-form-item label="meta-名称键值" prop="meta_title">
              <el-input v-model="formSubmitDataCom.meta_title"/>
            </el-form-item>
          </el-col>
          <!-- meta-icon图标 -->
          <el-col :span="12">
            <el-form-item label="meta-icon图标" prop="meta_icon">
              <el-input v-model="formSubmitDataCom.meta_icon"/>
            </el-form-item>
          </el-col>
          <!-- meta-是否缓存 -->
          <el-col :span="12">
            <el-form-item label="meta-是否缓存" prop="meta_no_cache">
              <el-switch
                v-model="formSubmitDataCom.meta_no_cache"
                >
              </el-switch>
            </el-form-item>
          </el-col>
          <!-- meta-affix标记 -->
          <el-col :span="12">
            <el-form-item label="meta-affix标记" prop="meta_affix">
              <el-switch
                v-model="formSubmitDataCom.meta_affix"
                >
              </el-switch>
            </el-form-item>
          </el-col>
          <!-- meta-breadcrumb -->
          <el-col :span="12">
            <el-form-item label="meta-breadcrumb" prop="meta_breadcrumb">
              <el-switch
                v-model="formSubmitDataCom.meta_breadcrumb"
                >
              </el-switch>
            </el-form-item>
          </el-col>
          <!-- meta-设置路径 -->
          <el-col :span="12">
            <el-form-item label="meta-设置路径" prop="meta_active_menu">
              <el-input v-model="formSubmitDataCom.meta_active_menu"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>路由节点</el-divider>
        <el-row :gutter="20">
          <!-- 节点编号 -->
          <el-col :span="12">
            <el-form-item label="节点编号" prop="p_code">
              <el-input v-model="formSubmitDataCom.p_code" :disabled="true"/>
            </el-form-item>
          </el-col>

          <!-- 节点名称 -->
          <el-col :span="12">
            <el-form-item label="节点名称" prop="p_name">
              <el-input v-model="formSubmitDataCom.p_name"/>
            </el-form-item>
          </el-col>

          <!-- 父节点编号 -->
          <el-col :span="12">
            <el-form-item label="父节点编号" prop="parent_code">
              <el-input v-model="formSubmitDataCom.parent_code"  :disabled="true"/>
            </el-form-item>
          </el-col>

          <!-- 状态 -->
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="formSubmitDataCom.status"
                >
              </el-switch>
            </el-form-item>
          </el-col>

        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <!-- <el-button @click="DialogFormVisibleCom = false">
          取消
        </el-button> -->
        <el-button @click="resetFormData">
          重置
        </el-button>
        <el-button type="primary" @click="dialogStatusClick">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'submitForm',
  components: {
    //PageHeaderLayout,
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    dialogStatus: {
      type: String,
    },
    parentNodeName: {
      type: String,
    },
    // tableColumn: {
    //     type: Array,
    //     default() {
    //         return []
    //     }
    // },
    formSubmitData: {
      type: Object,
      default: function () {
        return {
          id: undefined,
          path:'',                //url路径
          component:'',           //路由渲染组件
          always_show:true,         //如果设置为true，将总是显示根菜单  *如果没有设置alwaysShow，当item有多个子元素route时，  *它将成为嵌套模式，否则不显示根菜单
          name:'',                //路由名称，该名称由<keep-alive>使用(必须设置!!)  
          redirect:'noRedirect',            //如果设置noRedirect将不会在面包屑中进行重定向  
          hiden:false,               //是否隐藏路由
          // meta_roles:'',          //控制页面角色(可以设置多个角色)  
          meta_title:'',          //在侧边栏和面包屑中显示的名称键值(使用i18n组渲染最终标题)  
          meta_icon:'',           //图标显示在侧边栏中  
          meta_no_cache:false,       //如果设置为true，页面将不会被缓存(默认为false)  
          meta_affix:false,          //如果设置为true，标记将附加在标记视图中  
          meta_breadcrumb:true,     //如果设置为false，该项目将隐藏在breadcrumb中(默认为true)  
          meta_active_menu:'',    //如果设置了路径，侧边栏将突出显示您设置的路径  
          p_code:'',              //节点
          p_name:'',              //节点名称
          parent_code:'0',         //父节点
          status: '1',            //路由状态
        }
      }
    }
  },
  // 定义属性
  data() {
    return {
      textMap: {
        update: '修改',
        create: '新增根路由',
        addSonNode: '新增子路由',
      },
      rules: {
        path: [{ required: true, message: '必填', trigger: 'change' }],
        component: [{ required: true, message: '必填', trigger: 'change' }],
        name: [{ required: true, message: '必填', trigger: 'change' }],
        redirect: [{ required: true, message: '必填', trigger: 'change' }],
        // meta_title: [{ required: true, message: '必填', trigger: 'change' }],
        p_code: [{ required: true, message: '必填', trigger: 'change' }],
        p_name: [{ required: true, message: '必填', trigger: 'change' }],
        parent_code: [{ required: true, message: '必填', trigger: 'change' }],
    
        //  coa_name: [{ required: true, message: '节点名称必填', trigger: 'change' }],
        // currency: [{ required: true, message: '币种必填', trigger: 'change' }],
        // termplan: [{ required: true, message: '期限方案必填', trigger: 'change' }],
        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      // 表单用到的值
      // calendarTypeOptions,
      // statusOptions: ['published', 'draft', 'deleted'],
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    DialogFormVisibleCom: {
      get() {
        return this.dialogFormVisible
      },
      set(val) {
        this.$emit('update:dialogFormVisible', val)
      }
    },
    formSubmitDataCom: {
      get() {
        return this.formSubmitData
      },
      set(val) {
        this.$emit('update:formSubmitData', val)
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 重置
    resetFormData() {
       let exclude = []
      let replaceObj = {}
      if (this.dialogStatus === 'create') {
        exclude = [
          // 'coa_code',
        ]
        replaceObj = {
          // lp_code: "123456", //曲线名称
        }
      }
      if (this.dialogStatus === 'update') {
        exclude = [
          //  'coa_code',
          
        ]
      }
      if (this.dialogStatus === 'addSonNode') {
        exclude = [
          //  'coa_code',
          
        ]
      }
      this.$emit('resetFormDataEmit', {
        exclude,
        replaceObj
      })
    },
    dialogStatusClick() {
      //  dialogStatus==='create'?createData():updateData()
      if (this.dialogStatus === 'create') {
        this.createData()
      } else if (this.dialogStatus === 'update') {
        this.updateData()
      } else {
        this.addSonNode()
      }
    },

    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('handleFromCreateDataEmit')
          // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          // this.temp.author = 'vue-element-admin'
          // createArticle(this.temp).then(() => {
          //   this.list.unshift(this.temp)
          //   this.dialogFormVisible = false
          //   this.$notify({
          //     title: 'Success',
          //     message: 'Created Successfully',
          //     type: 'success',
          //     duration: 2000
          //   })
          // })
        }
      })
    },

    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.formSubmitData)
          this.$emit('handleFromUpdateDataEmit')
        }
      })
    },
    addSonNode() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.formSubmitData)
          this.$emit('handleFromAddSonNodeEmit')
        }
      })
    }

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

</style>